<template>
  <view :class="['fixedFooter', oneBtn || twoBtn ? 'pd16' : '']" :style="safeBottomStyle">
    <view v-if="oneBtn" class="one-btn" @click="btnFun">{{ btnText[0] }}</view>
    <view v-if="twoBtn" class="flca">
      <view @click="btnFun" class="two-btn">{{ btnText[0] }}</view>
      <view class="two-btn ml20" @click="functionSecond">{{ btnText[1] }} </view>
    </view>
    <slot name="inner" />
  </view>
</template>
<script>
export default {
  props: {
    oneBtn: {
      type: Boolean,
      default: false
    },
    twoBtn: {
      type: Boolean,
      default: false
    },
    btnText: {
      type: Array,
      default: () => ['']
    }
  },
  data() {
    return {
      globalData: getApp().globalData,
      safeBottomStyle: ''
    };
  },
  created() {},
  onLoad() {
    this.safeBottomStyle = `padding-bottom:${this.globalData.customizeInfo.safeAreaBottom}rem`;
  },
  methods: {
    btnFun() {
      this.$emit('btnFun');
    },
    functionSecond() {
      this.$emit('functionSecond', null);
    }
  }
};
</script>
<style lang="scss" scoped>
.pd16 {
  padding: 16rem;
}
.fixedFooter {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(255, 251, 247, 1);
  .one-btn {
    width: 100%;
    padding: 12rem;
    height: 44rem;
    box-sizing: border-box;
    background: #ff7c00;
    color: #ffffff;
    font-size: 16rem;
    line-height: 24rem;
    text-align: center;
    border-radius: 50rem;
  }
  .two-btn {
    width: 150rem;
    height: 44rem;
    line-height: 44rem;
    text-align: center;
    border-radius: 50rem;
    background: rgba(255, 124, 0, 1);
    font-size: 16rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
  }
  .ml20 {
    background-color: #2a82e4;
    margin-left: 20rem;
  }
}
</style>
